<template>
  <div id="app">
      <h1>My to-do-list</h1>
      <ul> 
         <li v-for="item in ToDoItems" :key="item.id">
             <to-do-item :label="item.label" :done="item.done" :id="item.id">

             </to-do-item>
         </li>
        </ul>
    </div>
</template>
<script>
import uniqueId from 'lodash.uniqueid';
import ToDoItem from './components/ToDoItem.vue';
export default {
  name:'app',
//   props: {
//     label: { required: true, type: String },
//     done: { default: false, type: Boolean }
//   },
  components:{
      ToDoItem
  },
  data(){
    return {
      ToDoItems: [
        {id:uniqueId('todo-'),label: 'Learn Vue', done: false },
        {id:uniqueId('todo-'), label: 'Create a Vue project with the CLI', done: true },
        { id:uniqueId('todo-'),label: 'Have fun', done: true },
        {id:uniqueId('todo-'),label: 'Create a to-do list', done: false }
      ]
    };
  }
};
</script>